
<%--
  Created by IntelliJ IDEA.
  User: 13468
  Date: 2020/5/20
  Time: 21:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>收藏夹</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/favorite.css"/>
    <script src="<%=request.getContextPath()%>/plugins/jquery/jquery-3.4.1.js"></script>
    <script src="<%=request.getContextPath()%>/plugins/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>


<jsp:include page="header.jsp"></jsp:include>

<div class="container-fluid head">
    <div class="container">

        <div class="log">
            收藏夹
        </div>
<%--        <div class="types">--%>
<%--            <ul>--%>
<%--                <li>--%>
<%--                    <div class="choose">--%>
<%--                        普通商品--%>
<%--                    </div>--%>
<%--                </li>--%>
<%--                <li>--%>
<%--                    <div class="choose">--%>
<%--                        团购商品--%>
<%--                    </div>--%>
<%--                </li>--%>
<%--                <li>--%>
<%--                    <div class="choose">--%>
<%--                        秒杀商品--%>
<%--                    </div>--%>
<%--                </li>--%>
<%--            </ul>--%>
<%--        </div>--%>

        <div class="search">
            <div style="margin-top: 20px">
                <form class="bs-example bs-example-form" role="form">
                    <div class="row" style="display: inline-block;width: 260px">
                        <div class="col-md-12">
                            <div class="input-group">
                                <input type="text" class="form-control" id="goodName" name="goodName">
                                <span class="input-group-btn">
                            <button class="btn btn-default" type="button" onclick="searchByName(${user.id})">搜索</button>
                        </span>
                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                </form>
            </div>
        </div>

    </div>
</div>

<div class="container">
    <div class="body" id="goodinfo">

        <c:if test="${empty goodCollectVOList}">
            <div class="none">
                <img src="../images/收藏.png" alt="图片加载失败">
                <div class="body-info">
                    还没有收藏过宝贝哦！快去 <a href="">逛逛</a> 吧
                </div>
            </div>
        </c:if>

        <c:if test="${not empty goodCollectVOList}">
            <div class="row" id="goods">
                <section class="goodslist" >
                    <ul id="goodShow">
                        <c:forEach var="good" items="${goodCollectVOList}">
                            <li class="col-sm-3">
                                <div class="good">
                                    <a href="/pharmacy/good/detail?id=${good.goodId}">
                                        <div class="img">
                                            <img src="<%=request.getContextPath()%>/${good.goodImages}" alt="图片加载失败">
                                        </div>
                                        <p style="color: black">${good.goodName}</p>
                                    </a>
                                    <p style="color: red">￥${good.goodPrice}</p>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </section>
                <div class="col-md-12">&nbsp;</div>
            </div>
        </c:if>


    </div>
</div>


<script>
    $('.choose').hover(
        function () {
            $(this).addClass('choosefunction')
        },function () {
            $(this).removeClass('choosefunction')
        });

    $('.types li').click(function () {
        $('.types li').eq($(this).index()).css('background-color','#DE3B00').siblings().css('background-color','#FF4400')
    });

</script>

<script>
    function searchByName(userId) {
        var goodName = $('#goodName').val()
        $.ajax({
            url:"/pharmacy/collect/selectbygoodname",
            data:"userId=" + userId + "&goodName=" + goodName,
            type:"post",
            dataType:"json",
            success:function (data) {
                console.log(data)
                var html = ''
                if (data.result != ""){
                    html = '<div class="row" id="goods">'
                    html = html + '<section class="goodslist" >'
                    html = html + '<ul id="goodShow">'
                    for (var i = 0; i < data.result.length; i++) {
                        html = html + '<li class="col-sm-3">'
                        html = html + '<div class="good">'
                        html = html + '<a href="#">'
                        html = html + '<div class="img">'
                        html = html + '<img src="<%=request.getContextPath()%>/' + data.result[i].goodImages + '" alt="图片加载失败">'
                        html = html + '</div>'
                        html = html + '<p style="color: black">' + data.result[i].goodName + '</p>'
                        html = html + '</a>'
                        html = html + '<p style="color: red">￥' + data.result[i].goodPrice + '</p>'
                        html = html + '</div>'
                        html = html + '</li>'
                    }
                    html = html + '</ul>'
                    html = html + '</section>'
                    html = html + '<div class="col-md-12">&nbsp;</div>'
                    html = html + '</div>'
                } else {
                    html = '<div style="text-align: center;margin-top: 30px"><h3>未搜索到对应商品</h3></div>'
                }
                console.log(html)
                $('#goodinfo').html(html)

            }
        })
    }
</script>


</body>
</html>
